import { defineComponent, reactive } from "vue";
import styles from "./FinancialAuthorization.module.less";
export default defineComponent({
  name:'userCenterFinancialAuthorization',
  setup() {
    const navs = reactive({
      list: [
        {
          text: '已关联',
        },
        {
          text: '待确认',
        },
      ],
      navsActived: 0,
    })
    const navClick = (index: number) => {
      navs.navsActived = index
    }
    //导航栏
    const Navs = () => (
      <div class={styles.navs}>
        {
          navs.list.map((item: any, index: number) => (
            <div class={styles['navs-item']} onClick={() => { navClick(index) }}>
              <span class={[index === navs.navsActived && styles['nav-item-actived'],
                index !== navs.navsActived && styles['nav-item-noActived']]}
              >{item.text}</span>
            </div>
          ))
        }
      </div>
    )
    const state = reactive({
      num: 18,
      columns: [
        {
          title: "编号",
          dataIndex: "id",
          key: "id",
          align: "center",
          width: "50px",
        },
        {
          title: "账号",
          dataIndex: "username",
          align: "center",
          width: "150px",
        },
        {
          title: "机构名称",
          dataIndex: "travelAgency",
          align: "center",
          width: "180px",
        },
        {
          title: "机构联系人",
          dataIndex: "realname",
          align: "center",
          width: "180px",
        },
        {
          title: "认证状态",
          dataIndex: "status",
          align: "center",
          width: "120px",
        },
      ],
      dataSource: [],
      pagination: {
        total: 1,
        current: 1,
        pageSize: 10,
      }
    })
    return () => (
      <div class={styles.financialAuthorization}>
        <div class={styles['header-box']}>账号管理</div>
        <div class={styles.container}>
          {/* <Navs />
          <div class={styles.title}>共关联{state.num}家分社或下属机构</div> */}
          <a-table
            columns={state.columns}
            bordered={true}
            scroll={{ x: "max-content" }}
            dataSource={state.dataSource}
            pagination={state.pagination}
          ></a-table>
        </div>
      </div>
    )
  }
})